import {CCard} from "@/components/card"
import {IconImg, ParamStatusIcon} from "@/components/images"
import {Text, View} from "@tarojs/components"
import "./components.scss"

const HistoryCardTitle: React.FC<{time: string}> = ({time}): JSX.Element => {
	return (
		<View className="h-38 bg-xxxx_bg mb-4 pl-16 flex items-center">
			<IconImg imgName="historyRecord" style={{marginRight: "12rpx"}}></IconImg>
			<Text className="noHanzi text-14 font-bold">{time}</Text>
		</View>
	)
}

export const HistoryCard: React.FC<{option: Device.CheckHistoryData}> = ({option}): JSX.Element => {
	return (
		<View className="px-16">
			<CCard
				title={<HistoryCardTitle time={option.devCheckTime}></HistoryCardTitle>}
				style={{
					padding: 0,
					marginBottom: "32rpx"
				}}
			>
				<View className="px-24 grid grid-cols-13 gap-x-8 gap-y-4">
					{/* 参数盒子中的每一行 */}
					{
						option.checkdataList.map(item => [
							<View className="h-48 flex justify-center items-center">
								<ParamStatusIcon status={item.paramStatus}></ParamStatusIcon>
							</View>,
							<View className="hanzi param_name text-14 text-left font-medium col-span-6 h-48 leading-48">
								{item.checkDataName}
								{/* {"啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊"} */}
							</View>,
							<View className="notHanzi text-12 text-left font-medium col-span-4 h-48 leading-48">
								{`${item.checkDataValue || "---"} ${item.checkDataUnit}`}
							</View>,
							<View className="hanzi text-14 text-right text-xx_text col-span-2 h-48 leading-48">
								{item.paramStatus}
							</View>
						])
						// <View className="w-full h-48 flex items-center">
						//   <ParamStatusIcon
						//     status={item.paramStatus}
						//     style={{
						//       marginRight: '12rpx'
						//     }}
						//   ></ParamStatusIcon>
						//   <View className="hanzi w-46 text-14 text-left font-medium mr-8">
						//     {item.checkDataName}
						//   </View>
						//   <View className="notHanzi flex-1 text-12 text-left font-medium mr-8">
						//     {`${item.checkDataValue || '---'} ${item.checkDataUnit}`}
						//   </View>
						//   <View className="text-14 text-xx_text">{item.paramStatus}</View>
						// </View>
					}
				</View>
			</CCard>
		</View>
	)
}
